<template>
  <div class="header">
    <header>
      <div class="head">
        <div class="logo" @click="goHome">
          <img src="../assets/web-logo.svg" alt="" srcset="" />
        </div>
        <div class="navbar">
          <ul class="nav">
            <li
              v-for="(item, index) in navList"
              :key="index"
              @click="changeHandle(item)"
              :class="{ bgColors: item.id===current  }"
            >
              <router-link :to="{ name: item.name, params: { id: item.id } }">{{
                item.title
              }}</router-link>
            </li>
          </ul>
        </div>
        <div class="searchbox">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="请输入内容"
            v-model="searchName"
            class="input-with-select"
            @change="seachChange"
          >
            <el-button @click="onSearch" slot="append">搜索</el-button>
          </el-input>
        </div>
        <div class="user" @click="goLogin">
          <template v-if="userinfo">
            <div class="username">{{ name }}</div>
          <div class="avatar">
            <el-avatar :src="avatarUrl"></el-avatar>
          </div>
          </template>
          <template v-if="!userinfo">
            <div class="login">登录</div>
          </template>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      // searchName: "",
      navList: [
        {
          id: 0,
          title: "社区精选",
          name: "Home",
        },
        {
          id: 1,
          title: "发布笔记",
          name: "Release",
        },
        {
          id: 2,
          title: "关于婚呀",
          name: "About",
        },
        {
          id: 3,
          title: "联系客服",
          name: "Contact",
        },
      ],
      current:'',
      token: "",
      userinfo: "",
      avatarUrl: "",
      name: "",
      searchName: "",
    };
  },
  props: {},
  mounted() {
    this.token = sessionStorage.getItem("token");
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    this.userinfo = userinfo;
    if (userinfo) {
      this.name = userinfo.name;
      this.avatarUrl = userinfo.avatarUrl;
    }

    console.log("userinfo", this.uesrinfo);
    console.log("token", this.token);
  },
  methods: {
    changeHandle(item) {
      this.page = 1;
      this.current =item.id;
      console.log('current',this.current);
    },
    goLogin() {
      if (!this.userinfo) {
        this.$router.push({ name: "Login" });
      } else {
        this.$router.push({ name: "userCenter" });
      }
    },
    seachChange() {
      this.$emit("search", this.searchName);
      // console.log(111);
      this.$router.push({
        name:'Search',
        query:{
          val:this.searchName
        }
      })
    },
    onSearch(){
        this.$emit("search", this.searchName);
      // console.log(111);
      this.$router.push({
        name:'Search',
        query:{
          val:this.searchName
        }
      })
    },
    goHome(){
       this.$router.replace({ name: "Home" });
    }
  },
};
</script>

<style>
.searchbox .input-with-select .el-input__inner {
  border-radius: 30px 0 0 30px;
  border-color: #f55863;
}
.searchbox .el-input-group__append {
  background: #f55863;
  border-radius: 0 30px 30px 0;
}
.searchbox .el-input-group__append .el-button {
  border-radius: 0 30px 30px 0;
  background: #f55863;
  color: #fff;
  line-height: 1.4;
}
</style>
<style scoped lang="less">
header {
  width: 100%;
  background: #fff;
  .head {
    max-width: 1200px;
    display: flex;

    height: 100px;
    align-items: center;
    justify-content: space-between;
    // padding-left: 178px;
    // padding-right: 178px;
    margin: 0 auto;
    .logo {
      cursor: pointer;
      width: 82px;
      height: 40px;
      margin-right: 80px;
    }
    .nav {
      display: flex;
      align-items: center;
      li {
        width: 100px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 25px;
        margin-right: 40px;
        font-size: 20px;
        a {
          color: #f54b64;
        }
      }
      .bgColors {
        background-image: linear-gradient(219deg, #f78361 3%, #f54b64 100%);
        a {
          color: #fff;
        }
      }
    }
    .user {
      display: flex;
      align-items: center;
      .username {
        margin-right: 10px;
      }
    }
  }
  .login{
    cursor: pointer;
    font-size: 18px;
    color: #f54b64;
    cursor: pointer;
    font-weight: 600;
  }
}
</style>
